<template>
  <div class="number-select" v-if="!getIsPhone">
    <play-instruction 
      :instruction="instruction"
      >
    </play-instruction>
    <div class="number-select-area">
      <lottery-box-only
        class="lottery-box-adjust" 
        v-for="item in getCurrentLotteryState" 
        :item="item"
        @click="handleUpdateData"
        :key="item.id">
      </lottery-box-only>
    </div>
  </div>
  <div class="number-select" v-else>
    <div class="number-select-area">
       <lottery-box-flow-phone
        v-for="item in getCurrentLotteryState"
        :item="item"
        :key="item.id"
        @click="handleUpdateData"
        class="select-row-adjust"
      ></lottery-box-flow-phone>
    </div>
  </div>
</template>

<script>
import PlayInstruction from '@/components/play-instruction/play-instruction'
import LotteryBoxOnly from '@/components/lottery-type/common/lottery-box-only'
import LotteryBoxFlowPhone from '@/components/lottery-type/common/lottery-box-flow-phone'
import { boxWithCleanerMixin } from '@/assets/js/mixin.js'
export default {
  mixins: [boxWithCleanerMixin],
  components: {
    PlayInstruction,
    LotteryBoxOnly,
    LotteryBoxFlowPhone
  },
  data() {
    return {
      instruction: '混合',
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .lottery-box-adjust >>> .box-top 
    width auto
    background none
    color $color-theme-dark
  .lottery-box-adjust >>> .box-bottom 
    color red
  .lottery-box-adjust >>> .grey
    color $color-ball-grey
    &.active 
      border 1px solid $color-ball-grey
      background rgba($color-ball-grey, 0.102)
      .box-bottom 
        color $color-ball-grey
    .box-top
      color $color-ball-grey
  .lottery-box-adjust >>> .red 
    color $color-ball-red 
    &.active 
      border 1px solid $color-ball-red 
      background rgba($color-ball-red, 0.102)
      .box-bottom 
        color $color-ball-red 
    .box-top
      color $color-ball-red 
  .lottery-box-adjust >>> .green 
    color $color-ball-green
    &.active 
      border 1px solid $color-ball-green 
      background rgba($color-ball-green, 0.102)
      .box-bottom 
        color $color-ball-green 
    .box-top 
      color $color-ball-green 
  .lottery-box-adjust >>> .blue 
    color $color-ball-blue
    &.active 
      border 1px solid $color-ball-blue 
      background rgba($color-ball-blue, 0.102)
      .box-bottom 
        color $color-ball-blue
    .box-top 
      color $color-ball-blue
  .lottery-box-adjust >>> .default 
    &.active 
      border: 1px solid $color-ball-red;
      background: rgba($color-ball-red, 0.102);
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
      box-sizing: border-box
      color $color-ball-red
      .box-top 
        color $color-theme-red
  .lottery-box-adjust >>> .box 
    width 110px

  @media screen and (max-width 750px) 
    .select-row-adjust >>> .select-row 
        margin-top 10px 
        &.border-bottom 
          border-color red !important
    .select-row-adjust >>> .lottery-box-adjust 
      width calc((100% - 40px) / 4) !important
      &:nth-child(5n + 5) 
        margin-right 10px !important
      &:nth-child(4n + 4) 
        margin-right 0px 
      .box-top 
        color $color-theme-dark
        width 100%
    .select-row-adjust 
      &:nth-child(2) >>> .lottery-box-adjust 
        &:nth-child(5) 
          margin-left calc((100% - 40px) / 4 + 10px) 
      &:last-child >>> .lottery-box-adjust  
        width calc((100% - 40px) / 4) !important
        &:first-child 
          &.active 
            border: 1px solid $color-ball-red;
            background: rgba($color-ball-red, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
            .box-bottom 
              color $color-ball-red
          .box-top 
           color $color-ball-red 
        &:last-child 
          &.active 
            border: 1px solid $color-ball-red;
            background: rgba($color-ball-red, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
            .box-bottom 
              color $color-ball-red
          .box-top 
            color $color-ball-red
        &:nth-child(2) 
          &.active 
            border: 1px solid $color-ball-blue;
            background: rgba($color-ball-blue, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
            .box-bottom 
              color $color-ball-blue
          .box-top 
            color $color-ball-blue
        &:nth-child(3) 
          &.active 
            border: 1px solid $color-ball-green;
            background: rgba($color-ball-green, 0.102);
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
            box-sizing: border-box
            .box-bottom 
              color $color-ball-green
          .box-top 
            color $color-ball-green
    .select-row-adjust >>> .active 
      border: 1px solid $color-ball-red;
      background: rgba($color-ball-red, 0.102);
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);
      box-sizing: border-box
      &.lottery-box-adjust  
        .box-top 
          color $color-theme-red
</style>